<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        li {
            border: 1px solid black;
            list-style: none;
        }

        .tit {
            line-height: 100px;

        }

        img {
            width: 100px;
            height: 100px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <!-- <span>删除</span> -->
    <ul id="cart"></ul>
    <script src="ajax.js"></script>
    <script>
        let cart = document.getElementById("cart");
        const baseUrl = "http://localhost:8888";
        ajax({
            url: baseUrl + "/cart/list",
            type: "get",
            params: { id: localStorage.getItem("uid") },
            author: true,
            fn(resData) {
                resData = JSON.parse(resData);
                if (resData.code == 0) {
                    location.href = "02login.html";
                } else {
                    console.log(resData);
                    let cartData = resData.cart;
                    let html = "";
                    cartData.forEach((o) => {
                        console.log(o)
                        html += `<li>
                           <img src="${o.img_small_logo}">
                    <span class="tit">${o.title}</span>
             <span>-</span>       <input type="text" value="${o.cart_number}" class="num" data-id="${o.goods_id}"> <span>+</span>
                    <span class="del" data-id="${o.goods_id}">X</span>
                    </li>`;
                    });
                    cart.innerHTML = html;
                    let del = document.querySelectorAll(".del");
                    del.forEach((ele) => {
                        ele.onclick = () => {
                            ajax({
                                url: baseUrl + "/cart/remove",
                                type: "get",
                                params: {
                                    id: localStorage.getItem("uid"),
                                    goodsId: ele.getAttribute("data-id"),
                                },
                                author: true,
                                fn(resData) {
                                    //console.log(resData);
                                    if (JSON.parse(resData).code == 1) {
                                        //ele.parentNode.remove();
                                        location.reload();
                                    }
                                },
                            });
                        };
                    });

                    let num = document.querySelectorAll(".num");
                    num.forEach((ele) => {
                        ele.onblur = () => {
                            ajax({
                                url: baseUrl + "/cart/number",
                                type: "post",
                                params: {
                                    id: localStorage.getItem("uid"),
                                    goodsId: ele.getAttribute("data-id"),
                                    number: ele.value,
                                },
                                author: true,
                                fn(resData) {
                                    console.log(resData);
                                },
                            });
                        };
                    });
                }
            },
        });
    </script>
</body>

</html>